<template>
  <el-drawer
    :title="equipmentModel.id?'编辑数据源':'添加数据源'"
    :visible.sync="drawerVisible"
    :size="'600px'"
    custom-class="data-element-drawer"
  >
    <div class="drawer-body">
      <el-form ref="dataForm" :rules="modelRules" :model="equipmentModel" label-width="180px">
        <el-form-item v-if="!isCreate" label="ID" prop="id">
          <div class="static-text">{{ equipmentModel.id }}</div>
        </el-form-item>
        <!--<el-form-item v-if="!isCreate" label="数据源类型" prop="type">
          <div class="static-text">{{ transType }}</div>
        </el-form-item>-->
        <el-form-item label="数据源名称" prop="name">
          <el-input v-model="equipmentModel.name" placeholder="数据源名称"/>
        </el-form-item>
        <el-form-item label="数据源描述" prop="northDispName">
          <el-input v-model="equipmentModel.northDispName" placeholder="数据源描述"/>
        </el-form-item>
        <template v-if="equipmentModel.type===2 || equipmentModel.type===4">
          <el-form-item label="Modbus从站号" prop="slaveId">
            <el-select v-model="equipmentModel.slaveId" placeholder="请选择">
              <el-option
                v-for="item in 255"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="equipmentModel.type===4">
          <el-form-item label="Modbus从站IP" prop="slaveIp">
            <el-input v-model="equipmentModel.slaveIp" placeholder="Modbus从站IP"/>
          </el-form-item>
          <el-form-item label="Modbus端口号" prop="slavePort">
            <el-input v-model.number="equipmentModel.slavePort" type="number" placeholder="Modbus端口号"/>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
  import {
    updateEquipment,
    createEquipment
  } from "@/api/equipment";
  import {
    btsOptions
  } from '@/utils/enums.js';

  export default {
    props: {},
    data() {
      return {
        btsOptions,
        drawerVisible: false,
        physicalId: undefined,
        equipmentId: undefined,
        activeName: 'first',
        equipmentModel: {},
        isSubmitLoading: false,
        isEdit: false,
        isCreate: false,
        modelRules: {
          name: [{ required: true, trigger: "blur", message: "请输入数据源名称" }],
          // northDispName: [{ required: true, trigger: "blur", message: "请输入数据源描述" }],
          slaveId: [{ required: true, trigger: "change", message: "请选择Modbus从站号" }],
          slaveIp: [{ required: true, trigger: "blur", message: "请输入Modbus从站IP" }],
          slavePort: [{ required: true, trigger: "blur", message: "请输入Modbus端口号" }]
        }
      };
    },
    computed: {
      transType() {
        let transVal = '';
        switch (this.equipmentModel.type) {
          case 1:
            transVal = 'DCS-COM';
            break;
          case 2:
            transVal = 'ModbusRTU-从站';
            break;
          case 3:
            transVal = 'ModbusRTU-主站';
            break;
          case 4:
            transVal = 'ModbusTCP-服务器';
            break;
          case 5:
            transVal = 'ModbusTCP-客户端';
            break;
          case 6:
            transVal = 'DCS-TCP';
            break;
        }
        return transVal;
      }
    },
    watch: {},
    mounted() {
    },
    methods: {
      show(row, gatewayId, portId, type) {
        this.resetModal();
        this.isSubmitLoading = false;
        if (row) {
          this.equipmentModel = row;
          this.isCreate = false;
        } else {
          this.isCreate = true;
          console.log(row, gatewayId, portId, type);
          this.equipmentModel.gatewayId = gatewayId;
          this.equipmentModel.portId = portId;
          this.equipmentModel.type = type;
        }
        this.drawerVisible = true;
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        })
      },
      resetModal() {
        this.equipmentModel = {
          gatewayId: undefined,
          slavePort: '502'
        };
        this.clearValidate();
      },
      save() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            //
            if (this.isCreate) {
              createEquipment(this.equipmentModel)
                .then(() => {
                  this.success();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            } else {
              updateEquipment(this.equipmentModel)
                .then(() => {
                  this.success();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            }
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      },
      success() {
        this.$message({
          message: this.isCreate ? "添加成功" : "编辑成功",
          type: "success"
        });
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        this.close();
        this.$emit("save", this.isCreate);
      },
      close() {
        this.drawerVisible = false;
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
      }
    }
  };
</script>

<style lang="scss">
  .data-element-drawer {
    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .drawer-body {
      flex: 1;
      overflow: auto;
      padding-bottom: 56px;

      .el-input {
        max-width: 360px;
      }

      .el-select {
        width: 360px;
      }
    }

    .drawer-footer {
      padding: 10px;
      background-color: #eef1f6;
      text-align: right;

      button {
        min-width: 100px;
      }
    }
  }

  .static-text {
    display: inline-block;
  }

  .tips-text {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    color: #999999;
  }
</style>
